<template>
    <!-- 商家备注弹窗 -->
    <div class="mark_remark_dialog">
        <el-dialog v-model="dialog.visible" width="40%" :title="dialog.title">
            <el-form ref="formRef" :model="dialog">
                <el-form-item label="" label-width="0" prop="remark">
                    <el-input
                        type="textarea"
                        placeholder="请添加商家备注，不超过200字"
                        v-model="dialog.remark"
                        show-word-limit
                        maxlength="200"
                        :rows="8"
                        autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelHandler">取消</el-button>
                    <el-button type="primary" @click="comfirmHandler">确定 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, computed, watch } from 'vue';
import { ZwMessage } from '@/commons';
import request from '@/request';

const emit = defineEmits(['getOrderList']);

const formRef = ref(null);

const dialog = reactive({
    visible: false,
    orderId: '',
    title: '',
    remark: ''
});

const openHandler = (orderId, remark) => {
    dialog.orderId = orderId;
    dialog.remark = remark || '';
    dialog.title = remark ? '修改商家备注' : '添加商家备注';
    dialog.visible = true;
};

const cancelHandler = () => {
    formRef.value.clearValidate();
    dialog.visible = false;
};

const comfirmHandler = () => {
    const param = {
        orderId: dialog.orderId,
        sellerRemarks: dialog.remark?.trim()
    };
    formRef.value.validate(rule => {
        rule &&
            request('updateSellerRemarkServ', param).then(res => {
                ZwMessage.success('操作成功');
                dialog.visible = false;
                emit('getOrderList');
            });
    });
};

defineExpose({ openHandler });
</script>
<style lang="scss" scoped>
.mark_remark_dialog {
    :deep(textarea) {
        padding: 16px;
    }
    :deep(.el-form-item--default) {
        margin-bottom: 8px;
    }
}
</style>
